/**
 * Input
 * @author: tongsitong
 * @param isError 用于校验输入框是否有值，为true表示输入框无值，变红
 */

import styled from "styled-components";
import { Input, InputProps } from "antd";
import { useEffect, useState } from "react";

const InputWrapper = styled.div`
  width: 236px;
  height: 28px;
  .ant-input {
    background: #ffffff;
    font-size: 13px;
    color: #35425e;
    padding: 0 0 0 8px;
    height: 28px;
    border: 1px solid #d4d7dd;
    border-radius: 2px;
    border-color: ${(props) =>
      props.isError ? "#E64A00" : "#D4D7DD"} !important;
    &:hover {
      border-color: #6292e1;
    }

    &:focus {
      border-color: #6292e1;
      box-shadow: none;
    }

    &:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px white inset !important;
    }
    &::placeholder {
      font-size: 13px;
      color: rgba(74, 87, 116, 0.4);
    }
  }

  .ant-input-affix-wrapper {
    font-size: 13px;
    color: #35425e;
    display: flex;
    align-items: center;
    height: 28px;

    &:hover {
      border-color: #6292e1;
    }

    .ant-input {
      height: 26px;
    }
    input:-internal-autofill-selected {
      // background-color: white !important;
    }
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px white inset;
    }
  }

  .ant-input-prefix {
    margin: 0;
    width: 22px;
  }
`;
interface SInputProps extends InputProps {
  isError?: boolean; // 用来校验为空时的样式
  value?: string; // 预设值
  placeholder?: string;
  style?: any;
  className?: any;
  onChange?: any;
  maxLength?: number;
}

const SInput = (props: SInputProps) => {
  const [localValue, setLocalValue] = useState<number | string | null>();
  let newProps = { ...props };
  delete newProps.isError;
  delete newProps.style;

  const changeLocalValue = (e) => {
    setLocalValue(e.target.value);
    props.onChange(e.target.value);
  };

  useEffect(() => {
    setLocalValue(props.value);
  }, [props.value]);

  return (
    <InputWrapper
      isError={props.isError}
      style={props.style}
      className={props.className}
    >
      <Input {...newProps} value={localValue} onChange={changeLocalValue} />
    </InputWrapper>
  );
};

export default SInput;
